<tr *ngIf="headerExpandConfig?.expand">
  <td [attr.colspan]="tableWidthConfig.length">
    <ng-template
      [ngTemplateOutlet]="headerExpandConfig?.expandTemplateRef || default"
      [ngTemplateOutletContext]="{ $implicit: this, columns: columns }"
    >
    </ng-template>
    <ng-template #default>
      <div>{{ headerExpandConfig?.description }}</div>
    </ng-template>
  </td>
</tr>
<ng-container *ngIf="!virtualScroll; else scrollViewTpl">
  <ng-container *ngFor="let rowItem of dataSource; trackBy: trackByFn; let rowIndex = index">
    <ng-template [ngTemplateOutlet]="trTable" [ngTemplateOutletContext]="{ rowItem: rowItem, rowIndex: rowIndex }"> </ng-template>
  </ng-container>
</ng-container>

<ng-template #scrollViewTpl>
  <ng-container *cdkVirtualFor="let rowItem of dataSource; trackBy: trackByFn; let rowIndex = index">
    <ng-template [ngTemplateOutlet]="trTable" [ngTemplateOutletContext]="{ rowItem: rowItem || {}, rowIndex: rowIndex }"> </ng-template>
  </ng-container>
</ng-template>

<ng-template #trTable let-rowIndex="rowIndex" let-rowItem="rowItem">
  <tr
    *ngIf="!rowItem?.$draggable"
    dDataTableRow
    [generalRowHoveredData]="generalRowHoveredData"
    [resizeable]="resizeable"
    [checkable]="checkable"
    [rowIndex]="rowIndex"
    [rowItem]="rowItem"
    [columns]="columns"
    [editRowItem]="editRowItem"
    [editModel]="editModel"
    [allChecked]="allChecked"
    [showExpandToggle]="showExpandToggle"
    [timeout]="timeout"
    [tableLevel]="tableLevel"
    [nestedIndex]="nestedIndex"
    class="{{ rowItem.$rowClass ? rowItem.$rowClass : '' }}"
    [ngClass]="{ 'table-row-selected': rowItem.$checked }"
  ></tr>
  <tr
    *ngIf="rowItem?.$draggable"
    dDataTableRow
    dDraggable
    [generalRowHoveredData]="generalRowHoveredData"
    [resizeable]="resizeable"
    [checkable]="checkable"
    [rowIndex]="rowIndex"
    [rowItem]="rowItem"
    [columns]="columns"
    [editRowItem]="editRowItem"
    [editModel]="editModel"
    [allChecked]="allChecked"
    [showExpandToggle]="showExpandToggle"
    [timeout]="timeout"
    [tableLevel]="tableLevel"
    [nestedIndex]="nestedIndex"
    class="{{ rowItem.$rowClass ? rowItem.$rowClass : '' }}"
    [ngClass]="{ 'table-row-selected': rowItem.$checked }"
    [dragData]="{ data: rowItem }"
    [dragScope]="rowItem?.$draggable['scope']"
    [dragOverClass]="rowItem?.$draggable['class']"
    [dragHandle]="rowItem?.$draggable['handler']"
  ></tr>
  <tr *ngIf="rowItem && rowItem['$isDetailOpen'] && rowItem.detail">
    <td [attr.colspan]="checkable ? 2 : 1"></td>
    <td [attr.colspan]="columns.length" class="detail-content" [style.padding]="'13px'">
      <ng-template
        [ngTemplateOutlet]="detailTemplateRef || default"
        [ngTemplateOutletContext]="{ $implicit: this, detail: rowItem.detail, rowIndex: rowIndex, rowItem: rowItem }"
      >
      </ng-template>
      <ng-template #default let-detail="detail" let-rowIndex="rowIndex" let-rowItem="rowItem">
        <div>{{ detail }}</div>
      </ng-template>
    </td>
  </tr>
  <tr class="expand-row" *ngIf="rowItem?.$expandConfig?.expand">
    <td *ngIf="checkable"></td>
    <td *ngIf="showExpandToggle"></td>
    <td [attr.colspan]="columns.length">
      <ng-template
        [ngTemplateOutlet]="rowItem.$expandConfig?.expandTemplateRef || default"
        [ngTemplateOutletContext]="{ $implicit: this, columns: columns, rowIndex: rowIndex, rowItem: rowItem }"
      >
      </ng-template>
      <ng-template #default>
        <div>{{ rowItem.$expandConfig?.description }}</div>
      </ng-template>
    </td>
  </tr>
  <tr class="child-table" *ngIf="rowItem['$isChildTableOpen'] && rowItem['children']">
    <td [attr.colspan]="childTdColspan">
      <table
        class="devui-table {{ type ? 'table-' + type : '' }} {{ rowHoveredHighlight ? 'table-hover' : '' }}"
        [style.table-layout]="'fixed'"
      >
        <colgroup>
          <col [style.width]="config.width" *ngFor="let config of tableWidthConfig" />
        </colgroup>
        <tbody
          dDataTableBody
          [dataSource]="rowItem['children']"
          [resizeable]="resizeable"
          [columns]="columns"
          [checkable]="checkable"
          [allChecked]="allChecked"
          [selectable]="selectable"
          [editModel]="editModel"
          [editRowItem]="editRowItem"
          [showExpandToggle]="showExpandToggle"
          [detailTemplateRef]="detailTemplateRef"
          [timeout]="timeout"
          [type]="type"
          [rowHoveredHighlight]="rowHoveredHighlight"
          [tableLevel]="tableLevel + 1"
          [nestedIndex]="nestedIndex + ',' + rowIndex"
          [tableWidthConfig]="tableWidthConfig"
          [generalRowHoveredData]="generalRowHoveredData"
        ></tbody>
      </table>
    </td>
  </tr>
</ng-template>
